<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />

    <meta
      http-equiv="Content-Security-Policy"
      content="default-src 'none'; style-src 'self' 'unsafe-eval' {{cspSource}}; img-src 'self' https: http: data: {{cspSource}}; script-src 'nonce-{{nonce}}';"
    />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <link href="{{reset}}" rel="stylesheet" />
    <link href="{{vscode}}" rel="stylesheet" />
    <link href="{{main}}" rel="stylesheet" />

    <title>{{title}}</title>
  </head>
  <body>
    <div class="title-wrap">
      <img src="{{angcyo}}" width="25" title="angcyo" />
      <h1>{{title}}</h1>
    </div>
    <label for="data">Svg数据(纯路径数据或者Svg标签数据):</label>

    <div class="svgFlex">
      <!-- 左边区域 -->
      <div>
        <!-- 编辑控制区 -->
        <div class="propertyWrap">
          <label for="width">width:</label
          ><input id="width" type="text" value="100" />
          <label for="height">height:</label
          ><input id="height" type="text" value="100" />
          <label for="viewBox">viewBox:</label
          ><input id="viewBox" type="text" value="0 0 100 100" />
          <label for="showBorder">显示边框:</label
          ><input id="showBorder" type="checkbox" />
        </div>

        <!-- 文本输入区 -->
        <textarea
          id="data"
          name="data"
          placeholder="请输入Svg数据..."
          autofocus
          rows="20"
        ></textarea>
        <textarea
          id="data2"
          name="data2"
          placeholder="请输入Svg数据2..."
          autofocus
          class="mt"
          rows="20"
        ></textarea>

        <!-- 按钮控制区 -->
        <div class="button-wrap margin">
          <button type="button" id="parse">解析</button>
        </div>
      </div>

      <!-- 右边区域 -->
      <div>
        <!-- 结果区 -->
        <label>输出结果:</label>
        <div id="svgWrap" class="svg-wrap margin"></div>
      </div>
    </div>

    <script nonce="{{nonce}}" src="{{script}}"></script>
  </body>
</html>
